<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="/styles/style.css" />
<style type="text/css">
#links {
	position: absolute;
	top: 150px;
	left: 50px;
}
</style>
<script type="text/javascript" src="/scripts/ajax.js"></script>
<script type="text/javascript" src="/scripts/script.js"></script>
<script type="text/javascript" src="/scripts/build.js"></script>
<style type="text/css"></style>
<script type="text/javascript">

function queryString(parameter) {
	var loc = location.search.substring(1, location.search.length);
	var param_value = false;
	var params = loc.split("&");
	for (i=0; i<params.length;i++) {
		param_name = params[i].substring(0,params[i].indexOf('='));
		if (param_name == parameter) {
			param_value = params[i].substring(params[i].indexOf('=')+1)
		}
	}
	if (param_value) {
		return param_value;
	} else {
		return false; //Here determine return if no parameter is found
	}
}

window.onkeydown = function(event) {
	if (event.keyCode == 37) onPrev(event);
	if (event.keyCode == 39) onNext(event);
}

function onEnd(event) {
	eventView.loadEvent("[end] End of Turn!");
}
function onNext(event) {
	if (selected == null) {
		setSelectedUnit(getFirstUnit());
		return;
	}

	var next = selected.nextSibling;
	if (next == null) next = getFirstUnit();
	setSelectedUnit(next);
}
function onPrev(event) {
	if (selected == null) {
		setSelectedUnit(getLastUnit());
		return;
	}

	var prev = selected.previousSibling;
	if (prev == null) prev = getLastUnit();
	setSelectedUnit(prev);
}

function onLoad() {
/*
	buildUnit("u2", "Spallaf System", 0, 0);
	buildUnit("u1", "Pooki System", 200, -100);
	buildUnit("u0", "Goobar System", -200, -100);
	buildUnit("u4", "Knipple System", 200, 100);
	buildUnit("u3", "Rollia System", -200, 100);
*/

	ajaxRequest("units.jsp", function(json) {
		for (var i = 0; i < json.units.length; ++i) {
			var unit = json.units[i];
			buildUnit(unit.id, unit.name, unit.posx, unit.posy, unit.ships, unit.targets);
		}
	});

	update();
}

function onBuild(event) {
	if (!selected) return;
	eventView.loadEvent("[build] A new Danician Ship [ship] is being built at the "+ selected.name +" [system].");
}
function onMove(event) {
	if (!selected) return;
	eventView.loadEvent("[move] The Danician Ship [ship] at the "+ selected.name +" [system] moves to the Knipple System [system].");
}
function onDisband(event) {
	if (!selected) return;
	eventView.loadEvent("[disband] The Danician Ship [ship] at the "+ selected.name +" [system] is being disbanded.");
}

function onBuildInfo() {
	if (!selected) return;
	setInformationBar("Build action, Cost 20 AP");
}
function onMoveInfo() {
	if (!selected) return;
	setInformationBar("Move action, Cost 10 AP");
}
function onDisbandInfo() {
	if (!selected) return;
	setInformationBar("Disband action, Cost 1 AP");
}
function onEndInfo() {
	setInformationBar("End of Turn");
}
function onNoInfo() {
	setInformationBar("");
}

</script>
</head>
<body onload="onLoad();">

<div id="map"></div>

<div id="events"></div>
<div id="eventqueue"></div>
<div id="links"><a href="units.json">json</a></div>

<!--div id="messages">
<div class="message">Phear: Take that!</div>
<div class="message">Aaron: Owww!</div>
<div class="message">Foopa: Woopie!</div>
<div class="message"><input id="messageinput" /></div>
</div-->

<div id="selection" class="label">
<img src="/gfx/left.png" alt="Previous" class="button left" onclick="onPrev();" />
<img src="/gfx/right.png" alt="Next" class="button right" onclick="onNext();" />
<span id="selection_text">Testing long name with spaces</span>
</div>

<div id="actions">
<ul>
<li><div class="label">CRACK</div>
<img src="/gfx/crack.png" alt="Crack" class="button" />
<div id="crackpoints" class="label">0</div>
</li>
<li><div class="label">BUILD</div><img src="/gfx/build.png" alt="Build" class="button" onclick="onBuild();" onmouseover="onBuildInfo();" onmouseout="onNoInfo();" /></li>
<!--li><div class="label">MOVE</div><img src="/gfx/move.png" alt="Move" class="button" onclick="onMove();" onmouseover="onMoveInfo();" onmouseout="onNoInfo();" /></li-->
<li><div class="label">DISBAND</div><img src="/gfx/disband.png" alt="Disband" class="button" onclick="onDisband();" onmouseover="onDisbandInfo();" onmouseout="onNoInfo();" /></li>
<li><div class="label">ACTION POINTS</div>
<img src="/gfx/end.png" alt="End" class="button" onclick="onEnd();" onmouseover="onEndInfo();" onmouseout="onNoInfo();" />
<div id="commandpoints" class="label">0</div>
</li>
</ul>
</div>

<!--embed src="svg/test.svg" width="200" height="200"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" /-->

<!--div id="status">
<h1>End Turn</h1>
<p>Turn 0 has ended.</p>
<table>
<tr><th>Player</th><th>Crack</th><th>Action Points</th></tr>
<tr><td>Danician</td><td>1</td><td>4 -2 +5 = 7</td></tr>
<tr><td>Phearian</td><td>2</td><td>2 -2 +3 = 3</td></tr>
</table>
<img class="button" src="/gfx/button.png" alt="OK" />
</div-->

</body>
</html>
